<@override name="content">
    <div class="header">
      <h1 class="page-title">数据管理</h1>
    </div>
    <ul class="breadcrumb">
      <li>
        <a href="admin">首页</a>
        <span class="divider">/</span>
      </li>
      <li>
        <a href="admin/problem">题目管理</a>
        <span class="divider">/</span>
      </li>
      <li>
        <a href="admin/problem/show/${pid!}">${pid!}</a>
        <span class="divider">/</span>
      </li>
      <li class="active">数据管理</li>
    </ul>
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="well">
          <div id="container">
            <h3><a href="problem/show/${problem.pid}" target="_blank">${problem.pid}</a>: <a href="admin/problem/show/${problem.pid}">${problem.title}</a></h3>
            <p class="text-info">Select files to upload.</p>
            <div id="filelist">
              <!-- <form class="form-horizontal" action="admin/problem/uploadData" method="post" enctype="multipart/form-data">
                <div class="control-group problem">
                  <label class="control-label" for="inputFile">File</label>
                  <div class="controls">
                    <input type="file" id="inputFile" name="dataFile" required />
                  </div>
                </div>
                <div class="control-group">
                  <div class="controls">
                    <button type="submit" class="btn btn-primary">Upload</button>
                  </div>
                </div>
              </form> -->
            </div>

            <div id="data-container">
                <a id="pickfiles" href="javascript:;"><i class="icon-file btn btn-primary">Browse</i></a> 
                <a id="uploadfiles" href="javascript:;"><i class="icon-upload btn btn-primary disabled" id="upload">Upload</i></a>
            </div>
            <div id="console"></div><br>
          
            <h4>Problem Test Data:</h4>
            <div>
            <#if dataFiles??>
            <table id="data-files" class="table table-hover table-condensed table-bordered">
              <thead>
                <tr>
                  <th>No.</th>
                  <th>File</th>
                  <th>Size</th>
                  <th>Modified</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <#list dataFiles as file>
                <tr>
                <td>${file_index+1}</td>
                <td class="file"><a href="admin/problem/viewData/${pid}?name=${file.name}" target="_blank">${file.name}</a></td>
                <td class="size" size="${file.size}"></td>
                <td class="timestamp" data="${file.modifyTime}"></td>
                <td class="action" name="${file.name}">
                  <i class="btn btn-primary edit">Edit</i>
                  <i class="btn btn-info download">Download</i>
                  <i class="btn btn-danger delete" data-trigger="confirm">Delete</i>
                </td>
                </tr>
                </#list>
              </tbody>
            </table>
            </#if>
            </div>
            <p class="text-info">.in files are standard input data files.</p>
            <p class="text-info">.out files are standard output data files.</p>
            <p class="text-warning">.in file name and .out file name should corresponding.(If there is no 1.out, 1.in will ignored for Judge.)</p>
            <p class="text-info">spj binary is for Special Judged problem.</p>
            <p class="text-info">we should always upload source code of spj.</p>
          </div>
        </div>
      </div>
    </div>
    
  <div class="modal hide fade dataModal" id="editModal" tabindex="-1"></div>
</@override>

<@override name="styles">
  <link rel="stylesheet" href="assets/bootstrap-modal/bootstrap-modal.css" type="text/css">
  <link rel="stylesheet" href="assets/tablecloth/css/tablecloth.css" type="text/css">
  <link rel="stylesheet" type="text/css" href="assets/tipsy/css/tipsy.css" type="text/css">
  <link rel="stylesheet" href="assets/jquery.artDialog/skins/twitter.css" type="text/css">
</@override>

<@override name="scripts">
  <script src="assets/tablecloth/js/jquery.metadata.js"></script>
  <script src="assets/tablecloth/js/jquery.tablesorter.min.js"></script>
  <script src="assets/tablecloth/js/jquery.tablecloth.js"></script>
  <script src="assets/bootstrap-modal/bootstrap-modal.js"></script>
  <script src="assets/bootstrap-modal/bootstrap-modalmanager.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      var url = 'admin/problem/editData/' + ${pid!};
      $modal = $('#editModal');
      $('.edit').click(function() {
        $('#filename').html($(this).parent().attr('name'));
        $('body').modalmanager('loading');
         $modal.load(url, {'name':$(this).parent().attr('name')}, function() {
          $modal.modal();
        });
      });

      $('.download').click(function() {
        window.location.href='admin/problem/downloadData/' + ${pid!} + '?name=' + $(this).parent().attr('name');
      });
      
      $('.delete').click(function() {
        var name = $(this).parent().attr('name');
        var $that = $(this).parent().parent();
        art.dialog({
          title: 'Confirm',
          content: 'Are you sure to remove this file(' + name + ')?',
          lock: true,
          opacity: 0.87,
          okVal: 'Yes',
          ok: function () {
            $.post('admin/problem/deleteData', {pid: ${pid!}, name : name}, function(data) {
              if (data.error) {
                $.dialog().content(data.error).lock().time(1.5);
              } else {
               $.dialog().content('Ok, file moved to upload directory.').lock().time(1.5);
               $that.remove();
              }
            });
            return true;
          },
          cancelVal: 'No',
          cancel: true
        });
      });
      
      $("#data-files").tablecloth({
        theme:"stats",
        condensed:true,
        sortable:false,
        striped:true,
        clean:true
      });

      $('.size').each(function() {
        $(this).html(num2size($(this).attr('size')));
      });
    });
  </script>

  <script src="assets/tipsy/js/jquery.tipsy.min.js"></script>
  <script src="assets/jquery.artDialog/jquery.artDialog.js"></script>
  <script type="text/javascript" src="assets/plupload/js/plupload.full.min.js"></script>
  <script type="text/javascript">
    // Custom example logic
    var uploader = new plupload.Uploader({
      runtimes : 'html5,flash,silverlight,html4',
      browse_button : 'pickfiles', // you can pass in id...
      container: document.getElementById('data-container'), // cannot change to $('#container')
      url : baseUrl + 'admin/problem/uploadData',
      flash_swf_url : baseUrl + 'assets/plupload/js/Moxie.swf',
      silverlight_xap_url : baseUrl + 'assets/plupload/js/Moxie.xap',
      multipart_params : { pid : ${pid!} },
      
      filters : {
        //max_file_size : '10mb',
        mime_types: [
          {title : "Data files", extensions : "in,out,txt"},
          {title : "Source files", extensions : "c,cc,cpp,pas,java,py"},
          {title : "Zip files", extensions : "zip,rar"}
        ]
      },

      init: {
        PostInit: function() {
          $('#filelist').html('');

          $('#uploadfiles').click(function() {
            uploader.start();
            return false;
          });
        },

        FilesAdded: function(up, files) {
          $('#upload').removeClass('disabled');
          plupload.each(files, function(file) {
            var html = $('#filelist').html();
            html += '<div class="file">' + file.name + ' (' + plupload.formatSize(file.size) + ')' +
                    '<div style="width:50%;" class="progress progress-striped active">' +
                    '<div class="bar" id="' + file.id + '"></div></div></div>';
            $('#filelist').html(html);
          });
        },
        
        UploadProgress: function(up, file) {
          $('#' + file.id).css('width', file.percent + '%');
          if (file.percent >= 100) {
            $('#' + file.id).parent().removeClass('active').addClass('progress-success');
          }
        },
        
        UploadComplete: function() {
          var html = $('#filelist').html();
          if (html == '')
          {
            return false;
          }
          $.dialog().content('All files uploaded.').lock().time(1);
          setTimeout(function() {
            window.location.reload();
          },
          1500);
        },
        
        Error: function(up, err) {
          var html = $('#console').html();
          html += '<p class="text-error">Error #' + err.code + ': ' + err.message + '</p>';
          $('#console').html(html);
        }
      }
    });

    uploader.init();

    function num2size(size)
    {
      if (size >= 1048576) {
        return (size / 1048576.0).toFixed(2) + ' MB';
      } else if (size >= 1024) {
        return (size / 1024.0).toFixed(2) + ' KB';
      } else {
        return size + ' B';
      }
    }
  </script>
</@override>
<@extends name="../_layout.html"></@extends>
